<!doctype html>
<html lang="en-US" dir="ltr">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>猫眼电影数据分析系统</title>
    {#    <link rel="apple-touch-icon" sizes="180x180" href="/static/static/img/favicons/apple-touch-icon.png">#}
    {#    <link rel="icon" type="image/png" sizes="32x32" href="/static/static/img/favicons/favicon-32x32.png">#}
    <link rel="icon" type="image/png" sizes="16x16" href="/static/static/picture/bitbucket.png">
    {#    <link rel="shortcut icon" type="image/x-icon" href="/static/static/img/favicons/favicon.ico">#}
    <link rel="manifest" href="/static/static/img/favicons/manifest.json">
    <meta name="msapplication-TileImage" content="/static/static/img/favicons/mstile-150x150.png">
    <meta name="theme-color" content="#ffffff">
    <link rel="preconnect" href="https://fonts.gstatic.com/">
    <link href="/static/static/css/css2.css" rel="stylesheet">
    <link href="/static/static/css/css21.css" rel="stylesheet">
    <link href="/static/static/css/phoenix.min.css" rel="stylesheet" id="style-default">
    <link href="#" rel="stylesheet" id="user-style-default">
    <style>
        body {
            opacity: 0;
        }
    </style>
</head>

<body>
<main class="main" id="top">
    <div class="container-fluid px-0">
        <nav class="navbar navbar-light navbar-vertical navbar-vibrant navbar-expand-lg">
            <div class="collapse navbar-collapse" id="navbarVerticalCollapse">
                <div class="navbar-vertical-content scrollbar">
                    <ul class="navbar-nav flex-column" id="navbarVerticalNav">
                        {#                <li class="nav-item"><a class="nav-link active" href="">#}
                        {#                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span data-feather="cast"></span></span><span class="nav-link-text">类型分析</span></div>#}
                        {#                  </a></li>#}
                        <li class="nav-item">
                            <p class="navbar-vertical-label">数据分析可视化</p>
                            <a class="nav-link active" href="/myApp/chartOne/">
                                <div class="d-flex align-items-center"><span class="nav-link-icon"><span
                                        data-feather="layers"></span></span><span class="nav-link-text">类型分析</span>
                                </div>
                            </a>
                            <a class="nav-link " href="/myApp/rateChart/">
                                <div class="d-flex align-items-center"><span class="nav-link-icon"><span
                                        data-feather="cast"></span></span><span class="nav-link-text">评分分析</span>
                                </div>
                            </a>
                            <a class="nav-link " href="/myApp/timeChart/">
                                <div class="d-flex align-items-center"><span class="nav-link-icon"><span
                                        data-feather="watch"></span></span><span class="nav-link-text">时间分析</span>
                                </div>
                            </a>
                            <a class="nav-link " href="/myApp/boxChart/">
                                <div class="d-flex align-items-center"><span class="nav-link-icon"><span
                                        data-feather="life-buoy"></span></span><span
                                        class="nav-link-text">票房分析</span></div>
                            </a>


                        </li>

                        <li class="nav-item">
                            <p class="navbar-vertical-label">数据总览</p>
                            <a class="nav-link " href="/myApp/tableData/">
                                <div class="d-flex align-items-center"><span class="nav-link-icon"><span
                                        data-feather="columns"></span></span><span
                                        class="nav-link-text">电影数据浏览</span></div>
                            </a>

                        <li class="nav-item">
                            <p class="navbar-vertical-label">个人信息</p>
                            <a class="nav-link " href="/myApp/changeInfo/">
                                <div class="d-flex align-items-center"><span class="nav-link-icon"><span
                                        data-feather="user"></span></span><span
                                        class="nav-link-text">个人信息修改</span></div>
                            </a>
                            <a class="nav-link " href="/myApp/collectData/">
                                <div class="d-flex align-items-center"><span class="nav-link-icon"><span
                                        data-feather="heart"></span></span><span class="nav-link-text">个人收藏</span>
                                </div>
                            </a>


                        </li>

                        <li class="nav-item">
                            <p class="navbar-vertical-label">预测</p>
                            <a class="nav-link " href="/myApp/predict/">
                                <div class="d-flex align-items-center"><span class="nav-link-icon"><span
                                        data-feather="flag"></span></span><span class="nav-link-text">票房预测</span>
                                </div>
                            </a>


                        </li>
                        <li class="nav-item">
                            <p class="navbar-vertical-label">推荐</p>
                            <a class="nav-link " href="/myApp/recommendation/">
                                <div class="d-flex align-items-center"><span class="nav-link-icon"><span
                                        data-feather="star"></span></span><span class="nav-link-text">电影推荐</span>
                                </div>
                            </a>


                        </li>

                        <li class="nav-item">
                            <p class="navbar-vertical-label">数据词云图</p>
                            <a class="nav-link dropdown-indicator active" href="#errors" role="button"
                               data-bs-toggle="collapse" aria-expanded="false" aria-controls="errors">
                                <div class="d-flex align-items-center">
                                    <div class="dropdown-indicator-icon d-flex flex-center"><span
                                            class="fas fa-caret-right fs-0"></span></div>
                                    <span class="nav-link-icon"><span data-feather="alert-cloud"></span></span><span
                                        class="nav-link-text">词云图</span>
                                </div>
                            </a>
                            <ul class="nav collapse parent" id="errors">
                                <li class="nav-item"><a class="nav-link " href="/myApp/movieCloud/" data-bs-toggle=""
                                                        aria-expanded="false">
                                    <div class="d-flex align-items-center"><span class="nav-link-text">电影词云图</span>
                                    </div>
                                </a></li>
                                <li class="nav-item"><a class="nav-link " href="/myApp/actorCloud/" data-bs-toggle=""
                                                        aria-expanded="false">
                                    <div class="d-flex align-items-center"><span class="nav-link-text">演员词云图</span>
                                    </div>
                                </a></li>
                            </ul>

                        </li>
                    </ul>
                </div>
                {#            <div class="navbar-vertical-footer"><a class="btn btn-link border-0 fw-semi-bold d-flex ps-0" href="#!"><span class="navbar-vertical-footer-icon" data-feather="log-out"></span><span>Settings</span></a></div>#}
            </div>
        </nav>
        <nav class="navbar navbar-light navbar-top navbar-expand">
            <div class="navbar-logo">
                <button class="btn navbar-toggler navbar-toggler-humburger-icon" type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbarVerticalCollapse" aria-controls="navbarVerticalCollapse"
                        aria-expanded="false" aria-label="Toggle Navigation"><span class="navbar-toggle-icon"><span
                        class="toggle-line"></span></span></button>
                <a class="navbar-brand me-1 me-sm-3" href="">
                    <div class="d-flex align-items-center">
                        <div class="d-flex align-items-center"><img src="/static/static/picture/bitbucket.png"
                                                                    alt="phoenix" width="32">
                            <p class="logo-text ms-2 d-none d-sm-block" style="font-size: 17px">猫眼电影数据分析系统</p>
                        </div>
                    </div>
                </a></div>
            <div class="collapse navbar-collapse">
                <div class="search-box d-none d-lg-block">
                    {#              <form class="position-relative" data-bs-toggle="search" data-bs-display="static"><input class="form-control form-control-sm search-input search min-h-auto" type="search" placeholder="Search..." aria-label="Search"> <span class="fas fa-search search-box-icon"></span></form>#}
                </div>
                <ul class="navbar-nav navbar-nav-icons ms-auto flex-row">
                    {#              <li class="nav-item dropdown"><a class="nav-link" id="navbarDropdownNotification" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="text-700" data-feather="bell" style="height:20px;width:20px;"></span></a></li>#}
                    {#              <li class="nav-item dropdown"><a class="nav-link notification-indicator notification-indicator-primary" id="navbarDropdownSettings" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="text-700" data-feather="settings" style="height:20px;width:20px;"></span></a></li>#}
                    {#              <li class="nav-item dropdown"><a class="nav-link" id="navbarDropdownNindeDots" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">#}
                    {#                    <circle cx="2" cy="2" r="2" fill="#6C6E71"></circle>#}
                    {#                    <circle cx="2" cy="8" r="2" fill="#6C6E71"></circle>#}
                    {#                    <circle cx="2" cy="14" r="2" fill="#6C6E71"></circle>#}
                    {#                    <circle cx="8" cy="8" r="2" fill="#6C6E71"></circle>#}
                    {#                    <circle cx="8" cy="14" r="2" fill="#6C6E71"></circle>#}
                    {#                    <circle cx="14" cy="8" r="2" fill="#6C6E71"></circle>#}
                    {#                    <circle cx="14" cy="14" r="2" fill="#6C6E71"></circle>#}
                    {#                    <circle cx="8" cy="2" r="2" fill="#6C6E71"></circle>#}
                    {#                    <circle cx="14" cy="2" r="2" fill="#6C6E71"></circle>#}
                    {#                  </svg></a>#}
                    <div class="dropdown-menu dropdown-menu-end py-0 dropdown-nide-dots shadow border border-300"
                         aria-labelledby="navbarDropdownNindeDots">
                        <div class="card bg-white position-relative border-0">
                            <div class="card-body pt-3 px-3 pb-0 overflow-auto scrollbar" style="height: 20rem;">
                                <div class="row text-center align-items-center gx-0 gy-0">
                                    <div class="col-4"><a
                                            class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3"
                                            href="#!" target="_blank"><img src="/static/static/picture/behance.png"
                                                                           alt="" width="30">
                                        <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Behance</p>
                                    </a></div>
                                    <div class="col-4"><a
                                            class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3"
                                            href="#!" target="_blank"><img src="/static/static/picture/google-cloud.png"
                                                                           alt="" width="30">
                                        <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Cloud</p>
                                    </a></div>
                                    <div class="col-4"><a
                                            class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3"
                                            href="#!" target="_blank"><img src="/static/static/picture/slack.png" alt=""
                                                                           width="30">
                                        <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Slack</p>
                                    </a></div>
                                    <div class="col-4"><a
                                            class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3"
                                            href="#!" target="_blank"><img src="/static/static/picture/github.png"
                                                                           alt="" width="30">
                                        <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Github</p>
                                    </a></div>
                                    <div class="col-4"><a
                                            class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3"
                                            href="#!" target="_blank"><img src="/static/static/picture/bitbucket.png"
                                                                           alt="" width="30">
                                        <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">BitBucket</p>
                                    </a></div>
                                    <div class="col-4"><a
                                            class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3"
                                            href="#!" target="_blank"><img src="/static/static/picture/google-drive.png"
                                                                           alt="" width="30">
                                        <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Drive</p>
                                    </a></div>
                                    <div class="col-4"><a
                                            class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3"
                                            href="#!" target="_blank"><img src="/static/static/picture/trello.png"
                                                                           alt="" width="30">
                                        <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Trello</p>
                                    </a></div>
                                    <div class="col-4"><a
                                            class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3"
                                            href="#!" target="_blank"><img src="/static/static/picture/figma.png" alt=""
                                                                           width="30">
                                        <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Figma</p>
                                    </a></div>
                                    <div class="col-4"><a
                                            class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3"
                                            href="#!" target="_blank"><img src="/static/static/picture/twitter.png"
                                                                           alt="" width="30">
                                        <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Twitter</p>
                                    </a></div>
                                    <div class="col-4"><a
                                            class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3"
                                            href="#!" target="_blank"><img src="/static/static/picture/pinterest.png"
                                                                           alt="" width="30">
                                        <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Pinterest</p>
                                    </a></div>
                                    <div class="col-4"><a
                                            class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3"
                                            href="#!" target="_blank"><img src="/static/static/picture/linkedin.png"
                                                                           alt="" width="30">
                                        <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Linkedin</p>
                                    </a></div>
                                    <div class="col-4"><a
                                            class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3"
                                            href="#!" target="_blank"><img src="/static/static/picture/google-maps.png"
                                                                           alt="" width="30">
                                        <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Maps</p>
                                    </a></div>
                                    <div class="col-4"><a
                                            class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3"
                                            href="#!" target="_blank"><img
                                            src="/static/static/picture/google-photos.png" alt="" width="30">
                                        <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Photos</p>
                                    </a></div>
                                    <div class="col-4"><a
                                            class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3"
                                            href="#!" target="_blank"><img src="/static/static/picture/spotify.png"
                                                                           alt="" width="30">
                                        <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Spotify</p>
                                    </a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    </li>
                    <li class="nav-item dropdown"><a class="nav-link lh-1 px-0 ms-5" id="navbarDropdownUser" href="#"
                                                     role="button" data-bs-toggle="dropdown" aria-haspopup="true"
                                                     aria-expanded="false">
                        <div class="avatar avatar-l"><img class="rounded-circle" src="/static/static/picture/57.png"
                                                          alt=""></div>
                    </a>
                        <div class="dropdown-menu dropdown-menu-end py-0 dropdown-profile shadow border border-300"
                             aria-labelledby="navbarDropdownUser">
                            <div class="card bg-white position-relative border-0">
                                <div class="card-body p-0 overflow-auto scrollbar" style="height: 18rem;">
                                    <div class="text-center pt-4 pb-3">
                                        <div class="avatar avatar-xl"><img class="rounded-circle"
                                                                           src="/static/static/picture/57.png" alt="">
                                        </div>
                                        <h6 class="mt-2">{{ userInfo.username }}</h6>
                                    </div>
                                    {#                      <div class="mb-3 mx-3"><input class="form-control form-control-sm" id="exampleFormControlInput1" placeholder="Update your status"></div>#}
                                    <ul class="nav d-flex flex-column mb-2 pb-1">
                                        <li class="nav-item"><a class="nav-link px-3" href="/myApp/index/"><span
                                                class="me-2 text-900" data-feather="cast"></span>查看大屏</a></li>
                                        {#                        <li class="nav-item"><a class="nav-link px-3" href="#!"><span class="me-2 text-900" data-feather="settings"></span>Settings &amp; Privacy</a></li>#}
                                        {#                        <li class="nav-item"><a class="nav-link px-3" href="#!"><span class="me-2 text-900" data-feather="help-circle"></span>Help Center</a></li>#}
                                        {#                        <li class="nav-item"><a class="nav-link px-3" href="#!"><span class="me-2 text-900" data-feather="globe"></span>Language</a></li>#}
                                    </ul>
                                </div>
                                <div class="card-footer p-0 border-top">
                                    {#                      <ul class="nav d-flex flex-column my-3">#}
                                    {#                        <li class="nav-item"><a class="nav-link px-3" href="#!"><span class="me-2 text-900" data-feather="user-plus"></span>Add another account</a></li>#}
                                    {#                      </ul>#}
                                    {#                      <hr>#}
                                    <div class="px-3"><a class="btn btn-phoenix-secondary d-flex flex-center w-100"
                                                         href="/myApp/logOut/"><span class="me-2"
                                                                                     data-feather="log-out"></span>退出登录</a>
                                    </div>
                                    {#                      <div class="my-2 text-center fw-bold fs--2 text-600"><a class="text-600 me-1" href="#!">Privacy policy</a>&bull;<a class="text-600 mx-1" href="#!">Terms</a>&bull;<a class="text-600 ms-1" href="#!">Cookies</a></div>#}
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>
        <div class="content pt-5">
            <div class="pb-5">
                <div class="row g-5">
                    <div class="col-12 col-xxl-12">
                        <div class="mb-8">
                            <h2 class="mb-2">类型分析</h2>
                        </div>

                        <hr class="bg-200 mb-6 mt-4">
                        <div class="row flex-between-center mb-4 g-3">
                            <div class="col-auto">
                                <h3>{{ defaultType }}类型电影票房TOP10</h3>
                            </div>
                            <div class="col-8 col-sm-4"><select onchange="typeChange(event)"
                                                                class="form-select form-select-sm mt-2">
                                {% for i in typeList %}
                                    {% if i == defaultType %}
                                        <option selected value="{{ i }}">{{ i }}</option>
                                    {% else %}
                                        <option value="{{ i }}">{{ i }}</option>
                                    {% endif %}
                                {% endfor %}
                            </select></div>
                        </div>
                        <div id="mainA" style="min-height:320px;width:100%"></div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="card border border-200 shadow-none h-100">
                            <div class="card-body">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <h5 class="mb-1">{{ defaultType }}类型 评分分布
                                            {#                                <span class="badge badge-light-warning rounded-pill fs--1 ms-2">-6.8%</span#}
                                        </h5>
                                        {#                            <h6 class="text-700">图表2</h6>#}
                                    </div>
                                    {#                          <h4>16,247</h4>#}
                                </div>
                                <div id="mainB" style="height: 390px;width: 100%">
                                    {#                          <div class="echart-total-orders" style="height:85px;width:115px" data-echarts='{"tooltip":{"show":false},"series":[{"type":"bar","barWidth":"5px","data":[120,200,150,80,70,110,120],"showBackground":true,"symbol":"none","itemStyle":{"borderRadius":10},"backgroundStyle":{"borderRadius":10}}],"grid":{"right":10,"left":10,"bottom":0,"top":0}}'></div>#}
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="card border border-200 shadow-none h-100">
                            <div class="card-body">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <h5 class="mb-1">各类型电影平均时长
                                            {#                                <span class="badge badge-light-warning rounded-pill fs--1 ms-2">-6.8%</span#}
                                        </h5>
                                        {#                            <h6 class="text-700">图表2</h6>#}
                                    </div>
                                    {#                          <h4>16,247</h4>#}
                                </div>
                                <div id="mainC" style="height: 390px;width: 100%">
                                    {#                          <div class="echart-total-orders" style="height:85px;width:115px" data-echarts='{"tooltip":{"show":false},"series":[{"type":"bar","barWidth":"5px","data":[120,200,150,80,70,110,120],"showBackground":true,"symbol":"none","itemStyle":{"borderRadius":10},"backgroundStyle":{"borderRadius":10}}],"grid":{"right":10,"left":10,"bottom":0,"top":0}}'></div>#}
                                </div>

                            </div>
                        </div>
                    </div>


                </div>
            </div>


        </div>
    </div>
</main>
<script src="/static/static/js/phoenix.js"></script>
<script src="/static/static/js/ecommerce-dashboard.js"></script>
{#  	<div style="display:none;"><a href="#">网站模板</a></div>#}
<script src="/static/static/echarts.js"></script>

<script>
    var chartDom = document.getElementById('mainC');
    var myChart = echarts.init(chartDom);
    var option;


    /*
        首先感谢大家对我作品的喜爱，谢谢大家！

        *★,°*:.☆\(￣▽￣)/$:*.°★*。撒花！

        这里想和大家说明一下，大家做完修改后尽量不要在本作品中点击保存哈

        在这里点击保存会覆盖原作品的哦，之后再浏览本作品看到的将会是你保存后的版本

        而原作品需要切换到特定的版本才能重见天日 ????

        这也是怪我首发的时候选错了权限 ┭┮﹏┭┮

        发出来也是希望帮助更多的前端攻城狮解决echarts样式问题

        请大家多多理解一下 ??

        饼图配置有疑问的可以评论哦，我看到了会及时回复哒(◍•ᴗ•◍)

        最后感谢大家的理解与支持    *★,°*:.☆\(￣▽￣)/$:*.°★*。撒花！

        作者：suwanqing     编辑于2020-07-28


    */
    let index = 0;
    var colorList = ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF']

    function fun() {
        var timer = setInterval(function () {
            myChart.dispatchAction({
                type: 'hideTip',
                seriesIndex: 0,
                dataIndex: index
            });
            // 显示提示框
            myChart.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: index
            });
            // 取消高亮指定的数据图形
            myChart.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: index == 0 ? 5 : index - 1
            });
            myChart.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: index
            });
            index++;
            if (index > 5) {
                index = 0;
            }
        }, 3000)
    }

    typeList = {{ typeList | safe }}
    {#fun()#}
    {#setTimeout(function() {fun()}, 5000);#}
    option = {
        title: {
            text: '',
            x: 'center',
            y: 'center',
            textStyle: {
                fontSize: 20
            }
        },
        tooltip: {
            trigger: 'item'
        },
        series: [{
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['24%', '45%'],
            clockwise: true,
            avoidLabelOverlap: true,
            hoverOffset: 15,
            itemStyle: {
                normal: {
                    color: function (params) {
                        return colorList[Math.floor(Math.random() * 7)]
                    }
                }
            },
            label: {
                show: true,
                position: 'outside',
                formatter: '{a|{b}：{c}分钟}\n{hr|}',
                rich: {
                    hr: {
                        /*
                再次声明一下，大家在这里修改之后不要点击上面的保存！
        不要点击保存！不要点击保存！重要的事情说三遍！
        你的修改会覆盖我的原代码的！感谢理解！
                                    --2020/8/4  by--suwanqing
                        */
                        backgroundColor: 't',
                        borderRadius: 3,
                        width: 3,
                        height: 3,
                        padding: [3, 3, 0, -12]
                    },
                    a: {
                        padding: [-30, 15, -20, 15]
                    }
                }
            },
            labelLine: {
                normal: {
                    length: 20,
                    length2: 30,
                    lineStyle: {
                        width: 1
                    }
                }
            },
            data: {{ typeAvgData | safe }},
        }]
    };

    option && myChart.setOption(option);
</script>
<script>
    var chartDom = document.getElementById('mainB');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#000'
                }
            },
            formatter: (params) => {
                return `<div style="height:80px;font-size: 12px;">
                    <p>${params[0].axisValueLabel}</p>
                    <p>${params[0].seriesName} ${params[0].data}</p>
                </div>`
            },
            backgroundColor: 'rgba(255,255,255,1)',
            padding: 10,
            textStyle: {
                color: '#000',
            },
            extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
        },
        legend: {
            x: '46%',
            bottom: '0',
            textStyle: {
                color: '#333',
            },
            data: ['流量']
        },
        grid: {
            left: 60,
            right: 50,
            top: 60,
            bottom: 60,
        },
        xAxis: {
            type: 'category',
            data: {{ rateDataX | safe }},
            boundaryGap: true,
            splitLine: {
                show: false,

            },
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: 'rgb(82, 108, 255)'
                }
            },
            axisLabel: {
                // margin: 10,
                textStyle: {
                    fontSize: 10
                }
            }
        },
        yAxis: {
            name: '个数',
            type: 'value',
            splitLine: {
                lineStyle: {
                    color: ['#D4DFF5']
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: 'rgb(82, 108, 255)'
                }
            },
            axisLabel: {
                // margin: 10,
                textStyle: {
                    fontSize: 14
                }
            }
        },
        series: [{
            name: '电影个数',
            type: 'bar',
            data: {{ rateDataY }},
            itemStyle: {
                normal: {
                    color: 'rgb(82, 108, 255)'
                }
            }
        }]
    }

    option && myChart.setOption(option);
</script>
<script>
    var chartDom = document.getElementById('mainA');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
        grid: {
            top: 15,
            left: 80,
            bottom: 23,
            right: 60
        },
        title: {
            {#text: '今日&昨日',#}
            left: '50%',
            textAlign: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#ddd'
                }
            },
            backgroundColor: 'rgba(255,255,255,1)',
            padding: [5, 10],
            textStyle: {
                color: '#7588E4',
            },
            extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
        },
        legend: {
            right: 20,
            orient: 'vertical',
            data: ['今日', '类型票房']
        },
        xAxis: {
            type: 'category',
            data: {{ boxDataX | safe }},
            boundaryGap: false,
            splitLine: {
                show: true,
                interval: 'auto',
                lineStyle: {
                    color: ['#D4DFF5']
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#609ee9'
                }
            },
            axisLabel: {
                margin: 10,
                textStyle: {
                    fontSize: 14
                }
            }
        },
        yAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    color: ['#D4DFF5']
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#609ee9'
                }
            },
            axisLabel: {
                margin: 10,
                textStyle: {
                    fontSize: 14
                }
            }
        },
        series: [{
            name: '类型票房',
            type: 'line',
            smooth: true,
            showSymbol: false,
            symbol: 'circle',
            symbolSize: 6,
            data: {{ boxDataY }},
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#D4DFF5'
                    }, {
                        offset: 1,
                        color: 'white'
                    }], false)
                }
            },
            itemStyle: {
                normal: {
                    color: '#609ee9'
                }
            },
            lineStyle: {
                normal: {
                    width: 3
                }
            }
        }]
    };
    option && myChart.setOption(option);
</script>
</body>
<script>
    function typeChange(e) {
        // 获取当前的时间戳（单位：毫秒）
        var currentTime = new Date().getTime();

        // 将时间戳和选中的类型一起加入 URL
        location.href = 'http://127.0.0.1:8000/myApp/chartOne?typeName=' + e.target.value + '&time=' + currentTime;
    }
</script>

</html>